<template>
	<view class="su-form-comp" :style="{width:compWidth}">
		<text class="su-redhot" v-if="isMust">*</text>
		<!-- 标题 -->
		<view v-if="showComp('title')" class="left" 
			:style="'width:'+titleWidth">
			<text class="title-view">{{title}}</text>
		</view>
		<!-- 内容 -->
		<view :class="['center',textRight?'text-right':'']">
			<input v-if="showComp('input')" class="input-view"
				   :type="type" :placeholder="placeholder" :value="bindValue" 
				   @input="_dataChange($event,type)" :disabled="disabled"/>
			<textarea v-if="showComp('textarea')" class="textarea-view" 
					:style="'min-height:'+areaHeight+';padding-left:'+iosPadding" :placeholder="placeholder" 
				   :value="bindValue" :auto-height="true" @input="_dataChange($event,type)" :disabled="disabled"></textarea>
			<text v-if="showComp('label')" :class="['label-view',disabled?'disabled':'']">{{bindValue||placeholder||""}}</text>
			<!-- 日期时间选择器 -->
			<view v-if="showComp('date')" @click="_dateClick">
				<text :class="['label-view',disabled?'disabled':'',handlePlcolor(dateValue)?'pl':'']">
					{{dateValue||placeholder}}
				</text>
			</view>
			<!-- 单选选择器 -->
			<view v-if="showComp('picker')" @click="_pickerClick">
				<!-- <picker @change="_dataChange($event,type)" :value="select['index']" :range="pickerData">
					<text class="label-view">{{select['name']||placeholder}}</text>
				</picker> -->
				<text :class="['label-view',disabled?'disabled':'',handlePlcolor(select['name'])?'pl':'']" >
					{{select['name']||placeholder}}
				</text>
			</view>
			<view v-if="showComp('input') && clearBtn && bindValue!==''"
				  class="su-form-iconclear"
				  @click="$emit('update:bindValue','')">
				<text class="iconfont icon-clear"></text>
			</view>
			<slot name="center"></slot>
		</view>
		<view :class="['right',disabled?'disabled':'']">
			<!-- 只有类型为select才会显示箭头 -->
			<text v-if="type=='select'" class="iconfont select-icon">&#xe669;</text>
			<text v-if="showComp('date') && !showDisicon" class="iconfont date-icon">&#xe610;</text>
			<text v-if="showDisicon" class="iconfont disabled-icon">&#xe6c1;</text>
			<slot name="right"></slot>
		</view> 
		<!-- select picker -->
		<su-picker ref="selectpicker" v-if="type=='select'&&pickerData.length>0" mode="selector" 
			:selectList="pickerData" :defaultVal="handleSelect(select)" :themeColor="$mainColor" 
			@confirm="_dataChange($event,'select')"></su-picker>
		<!-- date/datetime picker -->
		<su-picker ref="datepicker" v-if="showComp('date')" :mode="handleMode" 
			:defaultVal="dateArray" :themeColor="$mainColor" @confirm="_dataChange($event,type)"
			:current="dateArray.length==0"></su-picker>
	</view> 
</template> 

<script>
	/**
	 * pform v1.0.2
	 * @author: Jie.
	 * @date: 2020-06-04
	 */
	import Utils from"@/common/js/utils.js";import suPicker from"@/components/su-system/su-picker/picker.vue";export default{name:"suPform",components:{suPicker:suPicker},props:{title:{type:String,default:""},titleWidth:{type:String,default:"180rpx"},textRight:{type:Boolean,default:!1},type:{type:String,default:"text"},placeholder:{type:String,default:""},selectData:{type:Array,default:()=>[]},field:{type:String,default:""},bindValue:{type:[String,Number],default:""},disabled:{type:Boolean,default:!1},isMust:{type:Boolean,default:!1},compWidth:{type:String,default:"680rpx"},showDisicon:{type:Boolean,default:!1},areaHeight:{type:String,default:"200rpx"},defaultSelect:{type:Boolean,default:!0},useOgDate:{type:Boolean,default:!1},clearBtn:{type:Boolean,default:!1}},watch:{selectData(){this._handleSelect()},bindValue(){this._handleDefault()}},created(){this._handleSelect(),this._handleDefault(),"ios"==uni.getSystemInfoSync().platform&&(this.iosPadding="6rpx")},computed:{showComp:e=>(function(e){switch(e){case"title":return!!this.title;case"input":return"text"==this.type||"number"==this.type||"idcard"==this.type||"digit"==this.type;case"textarea":return"textarea"==this.type;case"label":return"label"==this.type;case"date":return"datetime"==this.type||"date"==this.type;case"picker":return"select"==this.type;default:return!1}}),handleSelect:e=>(function(){if("select"==this.type)return[this.select.name]}),handleMode(){return"date"==this.type?"date":"datetime"==this.type?"dateTime":void 0},handlePlcolor:e=>(function(e){return 0==this.disabled&&!e})},data:()=>({pickerMode:"datetime",dateArray:[],pickerData:[],dateValue:"",select:{index:0,name:"",code:"",id:""},iosPadding:"0rpx"}),methods:{_handleDefault(){"datetime"!=this.type&&"date"!=this.type||(this.bindValue&&"number"==typeof this.bindValue?this._handleDate(this.bindValue):(this.dateValue="",this.dateArray=[])),"select"==this.type&&void 0!==this.bindValue&&""!=this.bindValue&&null!=this.bindValue&&this.selectData.length>0&&this._selectCode(this.selectData)},_handleDate(e){var t="yyyy-MM-dd hh:mm";"date"==this.type&&(t="yyyy-MM-dd"),this.dateValue=Utils.formatDate(e,t),this.dateArray=Utils.getDateArray(e,this.type,!1)},_selectCode(e){if(void 0!==e[0].code)for(var t in e)this.bindValue==e[t].code&&(this.select.index=t,this.select.name=e[t].name,this.select.code=e[t].code);else this.select.name=this.bindValue},_handleSelect(){var e=this.selectData;for(var t in this.pickerData=[],e)0==t&&(this.select.index=0,void 0!==this.bindValue&&""!=this.bindValue&&null!=this.bindValue?this._selectCode(e):this.defaultSelect&&(this.select={...e[t]},this.$emit("change",{type:this.type,field:this.field,data:this.select}),this.$emit("update:bindValue",this.select[this.field]))),this.pickerData.push({label:e[t].name,value:e[t].code})},_pickerClick(){!this.disabled&&this.$refs.selectpicker.show()},_dateClick(){if(uni.sutils.isApp()){let i=this;if(!this.disabled&&this.useOgDate){let a=new Date(this.bindValue);var e={};function t(e){var t={title:"请选择时间："};t.time=a,plus.nativeUI.pickTime(t=>{let a={result:""},s=t.date,l=s.getHours(),d=s.getMinutes(),h=s.getSeconds();a.result=e+" "+l+":"+d+":"+h,i._dataChange(a,"datetime")},null,t)}e.date=a,plus.nativeUI.pickDate(e=>{let i={result:""},a=e.date,s=a.getFullYear()+"-"+(a.getMonth()+1)+"-"+a.getDate();"datetime"==this.type?t(s):(i.result=s,this._dataChange(i,"date"))},null,e)}else this.$refs.datepicker.show()}else!this.disabled&&this.$refs.datepicker.show()},_dataChange(e,t){if("select"==t){var i=e.defaultVal[0];this.select={index:i,...this.selectData[i]},this.$emit("change",{type:this.type,field:this.field,data:this.select}),this.$emit("update:bindValue",this.select[this.field])}else if("text"==t||"textarea"==t||"number"==t||"idcard"==t||"digit"==t)this.$emit("update:bindValue",e.detail.value);else if("date"==t||"datetime"==t){var a,s=e.result;(uni.sutils.isApp()||uni.sutils.isMp())&&(s=s.replace(/-/g,"/")),a=new Date(s).getTime(),this.bindValue||this._handleDate(a),this.$emit("update:bindValue",a),this.$emit("change",s)}}}};
</script>

<style lang="scss">
.su-form-comp {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	line-height:30upx;
	font-size: 30upx !important;
	flex: 1;
	width: 100%;
	.left {
		width: auto;
	}
	.center {
		position: relative;
		flex: 1;
	}
	.right {
		width: auto;
		display: flex;
		align-items: center;
		.select-icon,
		.date-icon{
			font-size: 36upx;
			line-height: 36upx;
			color: #636463;
		}
	}
	.su-redhot {
		position: absolute;
		left: -19upx;
		top: 17upx;
		color: $default-red;
		font-size: 30upx;
	}
	.su-form-iconclear {
		align-items: center;
		line-height: 0upx;
		padding: 10upx 0upx;
		position: absolute;
		right: 0upx;
		top: -4upx;
	}
}
.su-form-comp .center.text-right {
	text-align: right !important;
	padding-right: 20upx !important;
}
.su-form-comp .title-view {
	font-size: 30upx;
	color: #434343;
}
.su-form-comp .label-view {
	font-size: 30upx;
	color: #434343;
}
.su-form-comp .label-view.pl {
	color: #888888;
}
.su-form-comp .label-view.disabled,
.su-form-comp .right.disabled .select-icon,
.su-form-comp .right.disabled .date-icon,
.su-form-comp .right.disabled .disabled-icon{
	color: #999999;
}
.su-form-comp .input-view {
	height: 54upx;
	font-size: 30upx !important;
	line-height: 48upx;
}
.su-form-comp .textarea-view {
	font-size: 30upx !important;
	line-height: 48upx;
}

</style>
